<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul,li{ list-style: none; padding: 0; margin: 0;}
			body{ background:#325780 ;}
			/*item_one start*/
			.logoList{ width: 50%;}
			.logoList li{ width:220px; height: 200px; float: left; position: relative; margin: 5px 0; perspective:200px; }
			.logoList li .up{ width: 100%; height: 100%; position: absolute; display: flex; backface-visibility:hidden; transition: 1s;}
			.logoList li .up img{ margin: auto;}
			.logoList li .down{ width: 100%; height: 100%; background:rgba(0 ,150,245,0.5); position: absolute;display: flex; color: #fff;
			padding: 10px;box-sizing: border-box; transform: rotateY(-180deg); backface-visibility:hidden; transition: 1s;}
			/*backface-visibility：hidden;背面隐藏
			  box-sizing: border-box;
			  display: flex;
			  perspective:;井深
			 * */
			.logoList li:hover .up{ transform: rotateY(180deg);}
			.logoList li:hover .down{ transform: rotateY(0deg);}
			/*item_one end*/
			/*item_two start*/
			.imgAbout { width: 260px; height: 200px; border: 5px solid #0000FF; border-radius:5px ; overflow: hidden; position: relative; margin: 0 auto;}
			.imgAbout .up{width: 100%; height: 100%; position: absolute;z-index: 10;left: 0; top: 0;}
			.imgAbout .up li{ position:relative; float: left; overflow: hidden;}
			.imgAbout .up img{position: absolute; left: 0; top: 0;transition: 1s;}
			.imgAbout .down{ transform: scale(1.5); transition: 1s;}
			.imgAbout:hover .down{ transform: scale(1); }
			/*item_two end*/
		</style>
	</head>
	<body>
		<div id="content">
			<ul class="List">
				<li class="liList item_one" style="display: none;">
					<div class="divList" id="item_one">
						<div class="fl">
							<h2>LJAJDASSA</h2>
							<p></p>
						</div>
						<div class="fr">
							<ul class="logoList" >
								<!--<li>
									<div class="up"><img src="images/logo_1.jpg" alt="" /></div>
									<div class="down">测试11111</div>
								</li>-->
								<!--动态创建-->
							</ul>
							
						</div>
					</div>
				</li>
			    <li class="item_two">
			    	<div id="item_two">
			    	<div class="imgAbout">
			    		<ul class="up" data-src="./images/img_01.jpg"> 
			    			<!--把图设置到自定义属性上，然后通过获取自定义属性来设置相对应的图片-->
			    			<!--js中通过  dataset.src来得到图片-->
			    		</ul>
			    		<div class="down"><img src="./images/img_01.jpg">
			    		</div>
			    	</div>
			    	</div>
			    </li>
			</ul>
		</div>
		<script>
			//(function(){})();闭包是局部的，跟外界没有影响
			//一个独立的功能就是一个方法，要尽量多封装一些函数来作为一个方法
			(function(){
				var item_one=$('#item_one');
				var item_two=$('#item_two');
				init();
				
				function init(){  //初始化程序
				bindlogoList();	
				bindImgabout();	
					
				}
				function bindlogoList(){
					
					var logoList=$$(item_one,'.logoList')[0];
					var flag=document.createDocumentFragment();//创建文档碎片
					var jsonData=[
					    {"name":"logo_1.jpg" , "value":"测试11111"},
					    {"name":"logo_2.jpg" , "value":"222222222"},
					    {"name":"logo_3.jpg" , "value":"测试11111"},
					    {"name":"logo_4.jpg" , "value":"44444"},
					    {"name":"logo_5.jpg" , "value":"测试11111"},
					    {"name":"logo_6.jpg" , "value":"66666666"},
					    {"name":"logo_7.jpg" , "value":"测试11111"},
					    {"name":"logo_8.jpg" , "value":"888888888"},
					    {"name":"logo_9.jpg" , "value":"测试11111"}
					]
					for(var i=0;i<jsonData.length;i++){
						var li=document.createElement('li');
						li.innerHTML='<div class="up"><img src="images/'+jsonData[i].name+'" alt="" /></div><div class="down">'+jsonData[i].value+'</div>';
						flag.appendChild(li);
						
					}
					logoList.appendChild(flag);
				}
			
			    function bindImgabout(){ //about区域操作
			    	var imgAbout=$$(item_two ,'.imgAbout');
			    	for(var i=0;i<imgAbout.length;i++){
			    		change(imgAbout[i]);//两个不同的父容器来调用，相同的功能
			    	
			    	}
			    	function change(parent){
			    		var  up=$$(parent,'.up')[0];
			    		var  w=up.offsetWidth;
			    		var  h=up.offsetHeight; //父容易的宽高
			    		var src=up.dataset.src; //存src
			    		var flag=document.createDocumentFragment();//创建文档碎片
			    		var dir=[ //四个图片要出去的值先给他对应好
			    		  {name:"top",value:h/2},
			    		  {name:"left",value:-w},
			    		  {name:"left",value:w/2},
			    		  {name:"top",value:-h},
			    		  
			    		];//创建一个数组，虽然图片没规律，但是数组是有规律的
			    		for(var i=0;i<4;i++){//循环，要创建4个，所以为4
			    			var li=document.createElement('li'); //创建li
			    			li.style.width=w/2+'px';
			    			li.style.height=h/2+'px';
			    			var img=document.createElement('img');//创建img
			    			img.src=src;//把上面的src地址赋值给创建的img.src
//			    			i%2; //0101
//			    			Math.floor(i/2)//0011
			    			img.style.left=-i%2*w/2+'px';
			    			//存自定义属性
			    			img.initleft=-i%2*w/2; 
			    			img.style.top=-Math.floor(i/2)*h/2+'px';
			    			//存自定义属性
			    			img.inittop=-Math.floor(i/2)*h/2; 
			    			li.appendChild(img);
			    			flag.appendChild(li); //把li加到文档碎片中
			    			
			    		}
			    		up.appendChild(flag);
			    		
			    		var aImg=$$(up,'img');//在up里找四个img
			    		parent.onmouseover=function(){ //鼠标移入时对四个图片产生变化
//			    			console.log(aImg);
			    			for(var i=0;i<aImg.length;i++){
			    				aImg[i].style[dir[i].name]=dir[i].value+'px';
			    			}
			    		}
			    		parent.onmouseout=function(){ //鼠标移入时对四个图片产生变化
//			    		找初始值，可以自定义属性
			    			for(var i=0;i<aImg.length;i++){
			    				aImg[i].style[dir[i].name]=aImg[i]['init'+dir[i].name]+'px';
			    			}
			    		}
			    	}
			    }
			    
			//js base
			function $(selector){
				return document.getElementById(selector.substring(1));
			}
			function $$(elem , selector){
				if(arguments.length==1){
					selector=elem;
					elem=document;
				}
				if(selector.charAt(0)=='.'){
					return elem.getElementsByClassName(selector.substring(1));
				}
				else{
					return elem.getElementsByTagName(selector);
				}
			}
			})();
		</script>
	</body>
</html>
